<template>
    <div class="gongdan">
        <el-row :gutter="-5" class="row_1">
            <el-col :span="8" class="col_1">
                <span>查询条件：</span>
                <el-select
                        v-model="selectValue_1"
                        :multiple="false"
                        collapse-tags
                        style="margin-left: 20px;"
                        placeholder="查询条件">
                    <el-option
                            v-for="item in selectData"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4" class="col_2">
                <el-input
                        placeholder="查询条件"
                        v-model="queryinfo"
                        clearable
                v-if="this.selectValue_1!=='设备类型'">
                </el-input>
                <el-select
                        v-else
                        @change="change_select"
                        v-model="selectValue_2"
                        :multiple="false"
                        collapse-tags
                        style="margin-left: 20px;"
                        placeholder="查询条件">
                    <el-option
                            v-for="item in selectData_1"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">

                    </el-option>
                </el-select>

            </el-col>
            <el-col :span="4" class="col_3">
                <el-button type="primary" @click="seach">查询</el-button>
            </el-col>
        </el-row>

        <el-card>
<!--            表格-->
            <el-table
                    :data="gongDanData"
                    stripe
                    border
            >
                <el-table-column
                        prop="id"
                        label="工单ID"
                        align="center"
                        >
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="工单类型"
                        align="center"
                       >
                    <template v-slot="slot">
                        <el-tag v-show="slot.row.type===0">巡检</el-tag>
                        <el-tag v-show="slot.row.type===1">调试</el-tag>
                        <el-tag v-show="slot.row.type===2">保养</el-tag>
                        <el-tag v-show="slot.row.type===3">维修</el-tag>
                        <el-tag v-show="slot.row.type===4">培训</el-tag>
                        <el-tag v-show="slot.row.type===5">安装</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="ener_name"
                        label="工程师姓名"
                        align="center"
                       >
                </el-table-column>
                <el-table-column
                        prop="equipment_id"
                        label="设备ID"
                        align="center"
                        >
                </el-table-column>
                <el-table-column
                        prop="equipment_type"
                        label="设备型号"
                        align="center"
                       >
                </el-table-column>
                <el-table-column
                        prop="user_dep"
                        label="客户公司"
                        align="center"
                       >
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"

                        align="center"
                       >
                </el-table-column>
                <el-table-column label="操作" width="200px" align="center">
                    <template v-slot="slot">
                        <el-button type="primary" size="mini" @click="gongdanDetailed(slot.row)">查看详情</el-button>
                        <el-button type="danger" size="mini" @click="delete_gongdan">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
<!--            分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="qureyInfo.page"
                    :page-sizes="[2, 3, 5]"
                    :page-size="qureyInfo.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="datail">
            </el-pagination>

        </el-card>
<!--详情-->
<!--        <el-dialog-->

<!--                :visible.sync="gongdanDialogVisible"-->
<!--                width="50%"-->

<!--                 >-->
<!--            <span>这是一段信息</span>-->
<!--            <span slot="footer" class="dialog-footer">-->
<!--&lt;!&ndash;    <el-button @click="gongdanDialogVisible = false">取 消</el-button>&ndash;&gt;-->
<!--    <el-button type="primary" @click="gongdanDialogVisible = false">返回</el-button>-->
<!--  </span>-->
<!--        </el-dialog>-->

<!--        详情-->
        <el-drawer
                title="详情"
                :visible.sync="gongdanDialogVisible"
                :with-header="false">



            <el-button type="primary" class="cancel_drawer" @click="gongdanDialogVisible = false">返回</el-button>
        </el-drawer>

    </div>
</template>

<script>
    export default {
        name: "gongdan",
        data(){
            return{
                selectValue_1:'',
                selectValue_2:0,
                gongDanData:[],
                qureyInfo:{
                    action:'',
                    type:0,
                    page:1,
                    limit:3
                },
                datail:0,
                queryinfo:'',
                selectData:["设备类型","工程师姓名","设备ID","客户公司"],
                selectData_1:[
                    {key:0,value:"巡检"},
                    {key:1,value:"调试"},
                    {key:2,value:"保养"},
                    {key:3,value:"维修"},
                    {key:4,value:"培训"},
                    {key:5,value:"安装"},
                ],
                gongdanDialogVisible:false,
                queryEquipment_new:{

                }

            }
        },
        created() {
            this.getGongDan();
        },
        methods:{
             getGongDan(){
             this.$http.get("report",{params:this.qureyInfo}).then(res=>{
                 // console.log(res);
                 if(res.data.code!==1){
                     return this.$message.error("查询失败")
                 }
                 res.data.result.data.forEach(data=>{
                     data.ener_name="Tom";
                 });
                 this.gongDanData=res.data.result.data;
                 this.datail=res.data.result.limitCount;
                 // console.log(this.gongDanData)
             }).catch(err=>{
                 console.log(err);
             });
                // console.log(res);

                // console.log(res);
            },
            change_select(){
                 // console.log(this.selectValue_2);
            },
            seach(){
                if(this.selectValue_1==='设备类型'){
                    this.qureyInfo.type=this.selectValue_2;
                    // const{data:res}=await this.$http.get('report',{params:this.qureyInfo});
                    this.getGongDan();
                }else{
                    this.qureyInfo.action=this.queryinfo;
                    this.getGongDan();
                }
            },
            handleSizeChange(newsize){
                this.qureyInfo.limit=newsize;
                this.getGongDan();
            },
            handleCurrentChange(newnum){
                this.qureyInfo.page=newnum;
                this.getGongDan();
            },
            delete_gongdan(){
                 return this.$message.error("再删就没有了")
            },
            async gongdanDetailed(row){
                 // console.log(row);
                 const id1=row.id;
                const {data:res}=this.$http.get(`equipment/? id=${id1}&engineer_id=`,).catch(err=>{
                   console.log(err);
                });
                console.log(res);
                 this.gongdanDialogVisible=true;
            }
        }
    }
</script>

<style lang="less" scoped>
    .row_1{
        margin-left: 11px;
        /*background: blue;*/
        border-bottom: 2px solid #cccccc;
        .col_1{
            margin: 15px 0 15px 20px;
            span{
                font-size: 13px;

            }
        }
        .col_2{
            .col_1();
            margin-left: -120px;
            margin-right: 0;
        }
        .col_3{
            .col_1();
            margin-left: 10px;

        }
    }
    .el-card{
        /*margin-left: 10px;*/
        /*margin-right: 10px;*/
        border-radius: 0;
        border-top: none;

     }
    .cancel_drawer{
        position: absolute;
        bottom: 15px;
        right: 15px;
    }
</style>
